<template>
  <div class="MyUserIncomeStatisticsDia">
    <MyDialog v-bind="$attrs">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="意见" prop="content">
          <el-input
            v-model="ruleForm.content"
            :rows="15"
            type="textarea"
            placeholder="请输入意见"
          />
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup>
import MyDialog from "@/components/base/MyDialog.vue";
import { ref, reactive, onMounted, inject, provide, defineOptions } from "vue";
defineOptions({
  inheritAttrs: false,
});
// 规则
const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  content: [{ required: true, message: "请输入意见", trigger: "blur" }],
});
// 提交函数
const submitForm = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const ruleFormRef = ref(null);
const DialogShow = inject("SHOW");
// 取消函数
const cancelForm = () => {
  // 清空表单
  ruleFormRef.value.resetFields();
  ruleForm.title = "";
  ruleForm.content = "";
  ruleForm.imgUrl = [];
  DialogShow.value = false;
};
//表单
const ruleForm = reactive({
  username: "",
  phone: "",
  money: null,
  content: null,
});

provide("SUBMITFORM", submitForm);
provide("ONCANCEL", cancelForm);
onMounted(() => {
  console.log("onMounted,,弹窗组件公告");
});
</script>
<style scoped lang="scss">
.ReplyChatDia {
  .chat {
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    .chat_content {
      .myself {
        .avatar {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .content {
            margin-right: 10px;
          }
        }
      }
      .older {
        .avatar {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .content {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .chat_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    input {
      flex: 1;
      height: 30px;
      border-radius: 15px;
      border: 1px solid #ccc;
      padding: 0 10px;
      margin-right: 10px;
    }
  }
}
</style>
